<template>
  <div>
    <v-tabs fixed :tabs="tabs" v-model="current" @change="changeTab"></v-tabs>
    <swiper class="container-tabs__swiper" :current="swiperCurrent" @animationfinish="animationFinished">
      <swiper-item class="swiper-item" v-for="(outItem, outIndex) in list" :key="outIndex">
        <scroll-view scroll-y style="height: 100%" @scrolltolower="getData">
          <view class="v-order-item" v-for="(ov, oi) in list[outIndex].data" :key="oi">
            <view class="v-order-item__box" :class="{ 'u-border-top': outIndex > 0 }" v-for="(innerItem, innerIndex) in ov" :key="innerIndex">
              <view class="v-order-item__box-thumbnail">
                <image :src="innerItem.src" />
              </view>

              <view class="v-order-item__box-info">
                <view class="box-info__top">
                  <!-- 标题和数量 -->
                  <view class="box-info__title">
                    <text class="ellipsis">{{ innerItem.title }}</text>
                    <text>X{{ innerItem.count }}</text>
                  </view>
                  <view class="box-info__attr">{{ innerItem.attr }}</view>
                </view>

                <view class="box-info__bottom">
                  <view class="box-info__total_amount">
                    订单总金额：
                    <text>¥{{ innerItem.price }}元</text>
                  </view>
                  <view class="box-info__status">{{ innerItem.status }}</view>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>
  </div>
</template>

<script>
export default {
  name: 'SwiperOrder',
  data() {
    return {
      current: 0,
      swiperCurrent: 0,
      tabs: ['全部', '审核中', '待发货', '已发货', '租用中', '逾期中', '已完成'],
      list: [
        { loadmore: 'loadmore', page: 1, data: [] },
        { loadmore: 'loadmore', page: 1, data: [] },
        { loadmore: 'loadmore', page: 1, data: [] },
        { loadmore: 'loadmore', page: 1, data: [] },
        { loadmore: 'loadmore', page: 1, data: [] },
        { loadmore: 'loadmore', page: 1, data: [] },
        { loadmore: 'loadmore', page: 1, data: [] }
      ]
    }
  },
  mounted() {
    this.fillData()
  },
  methods: {
    changeTab(index) {
      console.log('index:', index)
      this.swiperCurrent = index
    },
    fillData() {
      if (this.list[this.current].data.length <= 0) {
        // 当没有数据的时候才请求
        this.getData()
      }
    },
    getData() {
      let mockData = []
      // 每页模拟 10 调数据
      for (let i = 0; i < 10; i++) {
        mockData.push([{
          title: '商品名称',
          count: 10,
          attr: '雅慧道系列 产品名称 60g',
          price: 800,
          src: 'https://tva1.sinaimg.cn/large/007S8ZIlgy1gi1y867us6j30a00a0gn7.jpg',
          status: '已付款'
        }])
      }
      this.$set(this.list[this.current], 'data', [...this.list[this.current].data, ...mockData])
    },
    animationFinished(e) {
      this.current = e.detail.current
      this.swiperCurrent = e.detail.current

      // 填充数据
      this.fillData()
    }
  }
}
</script>

<style lang="scss" scoped>
.container-tabs__swiper {
  height: 100vh;
}
.v-order-item {
  background-color: #fff;
  box-shadow: 0px 0px 10rpx rgba(0, 0, 0, 0.1);
  border-radius: 10rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;

  &__box {
    display: flex;

    &-thumbnail {
      width: 180rpx;
      height: 180rpx;
      margin-right: 30rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    &-info {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 1;
      overflow: hidden;

      .box-info__title {
        font-weight: bold;
        font-size: 32rpx;
        display: flex;
        justify-content: space-between;
      }

      .box-info__attr {
        color: #999;
        font-size: 20rpx;
        margin-top: 20rpx;
      }

      .box-info__bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .box-info__total_amount {
        font-size: 28rpx;

        text {
          color: #999;
        }
      }

      .box-info__status {
        font-size: 22rpx;
        color: #ff6600;
      }
    }
  }

  .v-order-item__box + .v-order-item__box {
    margin-top: 30rpx;
    padding-top: 30rpx;
  }
}
</style>
